<template>
  <div class="team-form-page">
    <a-breadcrumb>
      <a-breadcrumb-item> <a href="/home">首页</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="/team">班组管理</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="/team/form">班组信息</a></a-breadcrumb-item>
    </a-breadcrumb>
    <a-card v-if="!treeData">
      <a-tree-select
        v-model:value="value"
        style="width: 100%"
        showSearch="true"
        treeNodeFilterProp="title"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="请选择场所设备"
        tree-default-expand-all
      >
        <template #title="{ value }">
          {{ value }}
        </template>
      </a-tree-select>
    </a-card>
    <a-card>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <input type="hidden" v-model="formState.id" name="id"/>
        <a-form-item ref="name" label="班组名" name="name">
          <a-input v-model:value="formState.name" name="name" :maxlength="100"/>
        </a-form-item>
        <a-form-item ref="phone" label="值班电话" name="phone">
          <a-input v-model:value="formState.phone" name="phone" :maxlength="100"/>
        </a-form-item>
        <a-form-item ref="contactsPerson" label="联系人" name="contactsPerson">
          <a-input v-model:value="formState.contactsPerson" name="contactsPerson" :maxlength="100"/>
        </a-form-item>
        <a-form-item ref="remark" label="备注" name="remark">
          <a-textarea :rows="4" v-model:value="formState.remark" name="remark" show-count :maxlength="200"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
          <a-button style="margin-left: 10px" @click="goback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { defineComponent, getCurrentInstance, reactive, ref, toRaw, UnwrapRef, watch } from 'vue'
import { TeamModel } from './js/team-model'
import { TeamApi } from './js/team-api'
import { ResultModel } from '@/common/result.model'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

interface TreeDataItem {
    value: string;
    key: string;
    disabled?: boolean;
    title?: string;
    slots?: Record<string, string>;
    children?: TreeDataItem[];
}
const treeData: TreeDataItem[] = [
  {
    title: '通信运检一班',
    value: '0-0',
    key: '0-0',
    disabled: true,
    children: [
      {
        title: '高压室内墙5号摄像头',
        value: '0-0-1',
        key: '0-0-1'
      },
      {
        title: '蓄电池室5号摄像头',
        value: '0-0-2',
        key: '0-0-2'
      },
      {
        title: '保护室外墙1号摄像头',
        value: '0-0-3',
        key: '0-0-3'
      },
      {
        title: '保护室监控屏',
        value: '0-0-4',
        key: '0-0-4'
      }
    ]
  },
  {
    title: '通信运检二班',
    value: '0-1',
    key: '0-1',
    disabled: true,
    children: [
      {
        title: '设备一1',
        value: '0-1-1',
        key: '0-1-1'
      },
      {
        title: '设备二2',
        value: '0-1-2',
        key: '0-1-2'
      }
    ]
  }
]
export default defineComponent({
  data () {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 25,
            message: '名称应为3-25个文字',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    const id:string = this.$route.params.id as string
    if (id) {
      TeamApi.get(id).then(response => {
        const team = response.data
        Object.assign(this.formState, team)
      })
    }
  },
  methods: {
    goback () {
      this.$router.push('/team/team')
    }
  },
  setup () {
    const $router = useRouter()
    const formRef = ref()
    const formState: UnwrapRef<TeamModel> = reactive({
      name: ''
    })
    const value = ref<string>()
    watch(value, () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      console.log(value.value)
    })
    const onSubmit = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState))
          TeamApi.save(formState).then(response => {
            if (ResultModel.isSuccess(response)) {
              message.success('保存成功！')
              $router.push('/team/team/form/success?id=' + response.data.id)
            }
          })
        })
        .catch((error: ValidateErrorEntity<TeamModel>) => {
          console.log('error', error)
        })
    }
    const resetForm = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formRef.value.resetFields()
    }
    return {
      formState,
      formRef,
      value,
      treeData,
      onSubmit,
      resetForm
    }
  }
})
</script>

<style scoped lang="less">

</style>
